<template>
	<div class="Essay-components">
		<div v-if="data.questionAnswerContent && explain">
			<p class="ques-title">{{ data.questionAnswerContent.question }}</p>
			<div v-for="(item, index) in data.questionAnswerContent.essayList" :key="index">
				<div class="input-item">
					<span>{{ index + 1 }}:</span>
					<input type="text" placeholder disabled v-model="answer[index]" />
				</div>
				<p
					class="ques-title"
					style="font-weight: bold"
					v-show="!data.questionAnswerContent.score"
				>
					正确答案：
					<span style="color: #56baca">{{ data.questionAnswerContent.answer }}</span>
				</p>
			</div>
		</div>
		<div v-if="data.content && !explain">
			<p class="ques-title" @click="computeScore">{{ data.content.question }}</p>
			<div class="input-item" v-for="(item, index) in data.content.essayList" :key="index">
				<span>{{ index + 1 }}:</span>
				<input type="text" placeholder v-model="answer[index]" />
			</div>
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: "Essay",
	props: {
		data: {
			type: Object,
			default: {},
		},
		explain: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			answer: [],
		};
	},
	watch: {
		data: {
			handler(newV, oldV) {
				this.initState();
			},
			deep: true,
		},
	},
	mounted() {
		this.initState();
		this.answer = this.data.answer || [];
	},

	methods: {
		initState() {
			if (this.explain) {
				if (this.data.questionAnswerContent) {
					this.answer = this.data.questionAnswerContent.studentAnswer;
				} else {
					this.filterRight();
					this.answer = [];
				}
			} else {
				this.answer = this.data.answer || [];
			}
		},
		filterRight() {
			this.data.questionAnswerContent = JSON.parse(JSON.stringify(this.data.questionContent));
			this.data.questionAnswerContent.studentAnswer = [];
		},
		computeScore() {
			var score = 0;
			var content = JSON.parse(JSON.stringify(this.data.content));
			content.finish = true;
			content.essayList.forEach((element, index) => {
				if (element.essay === this.answer[index]) {
					score = score + this.data.questionScore;
					element.score = this.data.questionScore;
				} else {
					//element.essay = this.answer[index];
					element.score = 0;
				}
				element.answer = element.essay;
				if (!this.$isFull(this.answer[index])) {
					content.finish = false;
				}
			});
			content.studentAnswer = this.answer;
			return { content, score };
		},
		changeValue(key) {
			var { content, score } = this.computeScore();
			this.$emit("changeValue", this.answer, content, score);
		},
	},
};
</script>

<style lang="scss">
.Essay-components {
	.input-item {
		font-size: 12px;
		color: #ffffff;
		display: flex;
		align-items: center;
		margin: 15px 0;
		span {
			margin-right: 10px;
		}
		input {
			flex: 1;
			width: 250px;
			height: 38px;
			border: 1px solid #56baca;
			border-radius: 5px;
			color: #fff;
			background-color: #21202e;
			padding: 0 15px;
		}
		input::-webkit-input-placeholder,
		textarea::-webkit-input-placeholder {
			color: #6d6d79;
		}

		input:-moz-placeholder,
		textarea:-moz-placeholder {
			color: #6d6d79;
		}

		input::-moz-placeholder,
		textarea::-moz-placeholder {
			color: #6d6d79;
		}

		input:-ms-input-placeholder,
		textarea:-ms-input-placeholder {
			color: #6d6d79;
		}
	}
}
</style>
